<template>
  <div>
    <div class="nav">
      <span
        v-for="(item, index) in navArr"
        :key="item"
        :class="index == n ? 'active' : ''"
        @click="n = index"
        >{{ item }}</span
      >
    </div>

    <!--3. 展示列表  -->
    <show-list v-if="arr.length>0" :arr="arr[n].content"></show-list>
  </div>
</template>

<script>
import { reqhomegoods } from '../../../http/http';
export default {
  data() {
    return {
      // 1.初始化数据
      // 导航数据
      navArr: ["热门推荐", "上新推荐", "所有商品"],
      // 选中的下标
      n: 0,
      // 请求回来的数据
      arr:[]
    };
  },
  mounted(){
    // 2.一进来就请求 
    reqhomegoods().then(res=>{
      this.arr=res.data.list
    })
  }
};
</script>

<style scoped lang="less">
@import "../../../less/index.less";
.nav {
  display: flex;
  span {
    flex: 1;
    text-align: center;
    line-height: 60px;
    color: @primary;
    font-size: @font-h2;
    transition: all 0.3s;
  }
  .active {
    background: @primary;
    color: @white;
  }
}
</style>